<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <span title-type="h2" class="header__span">
        <h2 class="header__dev">
            <b class="dev__fe"><i>0</i></b>
            <span class="dev__slash">|</span>
            <b class="dev__ux"><i>1</i></b>
            <b class="dev__developer"><span class="dev__title">无后效性</span></b>
        </h2>
    </span>

    <style>
        .header__span {
            position: relative;
            top: 400px;
            left: 40%;
        }

        .dev__fe {
            text-align: right;
            direction: rtl;
            top: -68px;
            left: -40px;
        }

        .dev__ux {
            left: 66px;
            top: -57px;
        }

        .dev__slash {
            top: -20px;
            left: 58px;
            color: #85c7b0;
            font-size: 26px;
        }

        .header__span h2 .dev__fe i {
            text-indent: -7 px;
            top: 12 px;
            right: 0;
        }

        .header__span h2 .dev__ux i {
            text-indent: -8 px;
            top: 0;
            left: 0;
        }

        .dev__fe i,
        .dev__ux i {
            font-style: normal;
            position: absolute;
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-weight: 400;
            -webkit-transform: rotateZ(-22deg);
            transform: rotateZ(-22deg);
            color: #333;
        }

        .dev__fe,
        .dev__ux {
            width: 100px;
            height: 100px;
            position: absolute;
            overflow: hidden;
            transform: rotateZ(22deg);
            border: 1px solid red;
        }

        .dev__fe,
        .dev__ux,
        .dev__fe i,
        .dev__ux i,
        .dev__developer,
        .dev__slash {
            transition: all .6s cubic-bezier(0.555, -0.375, 0, 1.615);
        }

        .dev__developer {
            position: absolute;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: bold;
            font-family: "Open Sans", "Microsoft Jhenghei", "Microsoft Yahei", sans-serif;
        }

        .dev__slash {
            font-weight: 300;
            position: absolute;
            z-index: 5;
            transform: rotateZ(22deg);
        }
    </style>
</body>

</html>